<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../css/common/reset.css">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/bindStore.css">
</head>

<body style="background: #fff;">
    <!--列表 class="wechatPopup "-->
    <form class="layui-form bindStore">
        <div class="layui-form-item">
            <label class="layui-form-label">旺旺号：</label>
            <div class="layui-input-block">
                <input type="text" value="" placeholder="请填写旺旺号" id="boundWant" autocomplete="off" class="layui-input"
                    lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">店铺名称：</label>
            <div class="layui-input-block">
                <input type="text" value="" placeholder="请填写店铺名称" id="shopName" autocomplete="off" class="layui-input"
                    lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属平台：</label>
            <div class="layui-input-block">
                <select id="shopPlatform">
                    <option value="0">淘宝</option>
                    <option value="1">天猫</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请输入姓名" id="shopShipperName" autocomplete="off" class="layui-input"
                    lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话：</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请输入电话" id="shopShipperTel" autocomplete="off" class="layui-input"
                    lay-verify="required|phone">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择地区</label>
            <input type="hidden" id="shopShipperAddress">
            <div class="layui-input-inline">
                <select name="province" lay-filter="province" style="display: none;">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="city" lay-filter="city">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="area" lay-filter="area">
                    <option value="">请选择县/区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">详细地址：</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入发货详细地址" id="detailedAddress" class="layui-textarea" lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发货重量：</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请填写货物重量" id="weight" autocomplete="off" class="layui-input" lay-verify="weightsss">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">店铺推广状态：</label>
            <div class="layui-input-block">
                <input type="checkbox" value="0" id="tbk" name="like[write]" title="淘宝客">
                <input type="checkbox" value="0" id="nctb" name="like[read]" title="农村淘宝">
                <input type="checkbox" value="0" id="ztc" name="like[dai]" title="直通车">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传截图1：</label>
            <div class="layui-input-block">
                <input type="hidden" class="imgPic1">
                <img src="../../images/upload-1.jpg" alt="" class="example-img">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传截图2：</label>
            <div class="layui-input-block">
                <input type="hidden" class="imgPic2">
                <img src="../../images/upload-2.jpg" alt="" class="example-img">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo2">
                        <p id="demoText1"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" value="立即提交" class="layui-btn" lay-submit="" lay-filter="bindTb">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <p class="redColor"> 温馨提示：发货人信息会显示在快递单上，所以请如实填写。</p>
    </form>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.cookie.js"></script>
    <script src="../../js/area.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/dataRequest.js"></script>
    <!-- <script src="../../js/dataRequest.js"></script> -->
    <script>
        //初始数据
        var areaData = Area;
        var $form;
        var form;
        var $;
        var upload;
        var sImg;
        layui.use(['jquery', 'form', 'upload'], function () {
            $ = layui.jquery;
            form = layui.form;
            $form = $('form');
            upload = layui.upload;
            loadProvince();
            // form.verify({
            //     wx: [
            //         /^[\S]{6,12}$/
            //         , 'qq必须6到12位，且不能出现空格'
            //     ]
            // });
            //监听提交

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: IMG_URL
                , method: "POST"
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    console.log("请求返回的图片", res.data)
                    sImg = res.data;
                    if (res.code !== 200) {
                        return layer.msg('上传失败');
                    } else {
                        //上传成功
                        $(".imgPic1").val(res.data);
                        return layer.msg('上传成功');
                    }

                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });

            var uploadInst1 = upload.render({
                elem: '#test2'
                , url: IMG_URL
                , method: "POST"
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo2').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    console.log("请求返回的图片", res.data)
                    sImg += "," + res.data;
                    if (res.code !== 200) {
                        return layer.msg('上传失败');
                    } else {
                        //上传成功
                        $(".imgPic2").val(res.data);
                        return layer.msg('上传成功');
                    }

                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText1 = $('#demoText1');
                    demoText1.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText1.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });

            //加载省数据
            function loadProvince() {
                var proHtml = '';
                for (var i = 0; i < areaData.length; i++) {
                    proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
                }
                //初始化省数据
                $form.find('select[name=province]').append(proHtml);
                form.render();
                form.on('select(province)', function (data) {
                    $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
                    var value = data.value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if (count > 0) {
                        loadCity(areaData[index].mallCityList);
                    } else {
                        $form.find('select[name=city]').parent().hide();
                    }
                });
            }
            //加载市数据
            function loadCity(citys) {
                var cityHtml = '';
                for (var i = 0; i < citys.length; i++) {
                    cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
                }
                $form.find('select[name=city]').html(cityHtml).parent().show();
                form.render();
                form.on('select(city)', function (data) {
                    var value = data.value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if (count > 0) {
                        loadArea(citys[index].mallAreaList);
                    } else {
                        $form.find('select[name=area]').parent().hide();
                    }
                });
            }
            //加载县/区数据
            function loadArea(areas) {
                var areaHtml = '';
                for (var i = 0; i < areas.length; i++) {
                    areaHtml += '<option value="' + areas[i].areaName + '">' + areas[i].areaName + '</option>';
                }
                $form.find('select[name=area]').html(areaHtml).parent().show();
                form.render();
                form.on('select(area)', function (data) {
                    console.log(data);
                });
            }
            form.verify({
                weightsss: [/^[1-9]+([.]{1}[0-9]+){0,1}|0.[1-9]+$/, '发货重量必须为数字，可以是小数，不能为0'],
                phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']
            });
            form.on('submit(bindTb)', function (data) {
                console.log("往下执行")
                var imgPic1 = $(".imgPic1").val();
                var imgPic2 = $(".imgPic2").val();
                if (!imgPic1) {
                    layer.alert('请上传截图1', { icon: 5 });
                    return;
                } else if (!imgPic2) {
                    layer.alert('请上传截图2', { icon: 5 });
                    return;
                }
                var mid = $.cookie('id');
                var boundWant = $("#boundWant").val();
                var shopName = $('#shopName').val();
                var shopPlatform = $("#shopPlatform option:selected").text();
                var status = $('#status').val();
                var shopShipperName = $('#shopShipperName').val();
                var shopShipperTel = $('#shopShipperTel').val();
                var shopShipperAddress = $('#shopShipperAddress').val();
                var detailedAddress = $('#detailedAddress').val();
                var weight = $('#weight').val();
                if (weight.match(/^[1-9]+([.]{1}[0-9]+){0,1}|0.[1-9]+$/) == null) {
                    layer.alert('发货重量不能为0发货重量必须为数字，可以是小数，不能为0');
                    return;
                }
                // if (weight == 0) {
                //     layer.alert('发货重量不能为0', { icon: 5 });
                //     return;
                // }
                var tbk;
                if ($("#tbk").is(":checked")) {//选中
                    var tbk = $("#tbk").attr("value", "1").val();//打印选中的值
                } else {
                    var tbk = $("#tbk").attr("value", "0").val();
                }
                var ztc;
                if ($("#ztc").is(":checked")) {//选中
                    var ztc = $("#ztc").attr("value", "1").val();//打印选中的值
                } else {
                    var ztc = $("#ztc").attr("value", "0").val();
                }
                var nctb;
                if ($("#nctb").is(":checked")) {//选中
                    var nctb = $("#nctb").attr("value", "1").val();//打印选中的值
                } else {
                    var nctb = $("#nctb").attr("value", "0").val();
                }
                var province = $("select[name=province]").next().find("input").val();
                console.log("获取的省", province);
                if (!province) {
                    layer.alert('您还未选择地址', { icon: 5 });
                    return;
                }
                var city = "," + $("select[name=city]").next().find("input").val();
                var area = "," + $("select[name=area]").val();
                console.log("区域显示", area);
                var shopShipperAddress = province + city + area;

                console.log(shopShipperAddress);
                var JdateJson = {
                    "merchantsId": mid,
                    "imagePath": sImg,
                    "boundWant": boundWant,
                    "shopName": shopName,
                    "shopPlatform": shopPlatform,
                    "status": status,
                    "shopShipperName": shopShipperName,
                    "shopShipperTel": shopShipperTel,
                    "shopShipperAddress": shopShipperAddress,
                    "detailedAddress": detailedAddress,
                    "weight": weight,
                    "checkTaobaoGuest": tbk,
                    "checkThroughTrain": ztc,
                    "checkTaobaoRural": nctb
                }
                // return;
                $.ajax({
                    url: "http://47.92.174.143:8888/v1/client/shop",
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(JdateJson),
                    success: function (data) {
                        console.log("qingqiudaoshenmmele：", data)
                        var _Success = data.code;
                        if (_Success == 200) {
                            layer.msg("提交成功");
                            // return;
                            var index = parent.layer.getFrameIndex(window.name);
                            setTimeout(function () {
                                parent.layer.close(index);//关闭弹出层
                                parent.location.reload();//更新父级页面（提示：如果需要跳转到其它页面见下文）
                            }, 2000);
                        } else {
                            return;
                            layer.msg(data.data);
                        }
                    }
                })
                //防止页面跳转
                return false;
            });
        });
    </script>
</body>

</html>